<template>
  <!-- <div class="content-box">
    <common-header :title="title"></common-header> -->
    <div class="page-content">
      <template v-if="hasbank">
        <van-swipe-cell
          :before-close="beforeClose"
          :name="item.name"
          v-for="item in bankList"
          :key="item.id"
        >
          <van-cell :title="item.name" @click="toDetail(item)" is-link />
          <template slot="right">
            <van-button square type="danger" text="删除" />
          </template>
        </van-swipe-cell>
      </template>
      <template v-else>
        <div style="text-align:center;margin:.5rem 0;">
          <svg
            t="1576920937968"
            class="icon"
            viewBox="0 0 1024 1024"
            version="1.1"
            xmlns="http://www.w3.org/2000/svg"
            p-id="3593"
            width="120"
            height="120"
          >
            <path
              d="M909.016 820.828H841a30 30 0 0 1 0-60h38.016a20 20 0 0 0 20-20V145.185a20 20 0 0 0-20-20H352a20 20 0 0 0-20 20v28h370.016a50 50 0 0 1 50 50v223.36a29.989 29.989 0 1 1-59.507 5.283h-0.493V253.185a20 20 0 0 0-20-20H145a20 20 0 0 0-20 20v625.643a20 20 0 0 0 20 20h337a30 30 0 0 1 0 60H115a50 50 0 0 1-50-50V223.185a50 50 0 0 1 50-50h157v-58a50 50 0 0 1 50-50h587.016a50 50 0 0 1 50 50v655.643a50 50 0 0 1-50 50z m-663.037-484H572.74a29.979 29.979 0 1 1 0 59.957H245.979a29.979 29.979 0 1 1 0-59.957z m0 290.043h74.912a29.979 29.979 0 0 1 29.979 29.978 29.979 29.979 0 0 1-29.979 29.979h-74.912A29.979 29.979 0 0 1 216 656.849a29.979 29.979 0 0 1 29.979-29.978zM216 511.807a29.979 29.979 0 0 1 29.979-29.979h140.935a29.979 29.979 0 0 1 29.979 29.979v0.042a29.979 29.979 0 0 1-29.979 29.979H245.979A29.979 29.979 0 0 1 216 511.849v-0.042z m163 177.521c0-107.419 87.081-194.5 194.5-194.5S768 581.909 768 689.328a193.618 193.618 0 0 1-37.9 115.356l84.115 84.115a30 30 0 1 1-42.425 42.429l-84.3-84.3a193.6 193.6 0 0 1-113.99 36.9c-107.419 0-194.5-87.081-194.5-194.5z m194.5 134.5a134.5 134.5 0 1 0-134.5-134.5 134.5 134.5 0 0 0 134.5 134.5z"
              fill="#bfbfbf"
              p-id="3594"
            />
          </svg>
          <p style="font:.5rem/1.5 'Microsoft YaHei';color:#ccc;">暂无数据</p>
        </div>
      </template>
      <div class="btnPay" @click="addBank()">新增银行卡</div>
      <commonFooter></commonFooter>
    </div>
  <!-- </div> -->
</template>
<script>
import { commonHeader, commonFooter } from "common";
import { createNamespacedHelpers } from "vuex";
let { mapState } = createNamespacedHelpers("user");
export default {
  name: "recharge",
  components: {
    commonHeader,
    commonFooter
  },
  methods: {
    beforeClose({ name, position, instance }) {
      switch (position) {
        case "right":
          console.log(this.name);
          this.$dialog
            .confirm({
              message: name
            })
            .then(() => {
              instance.close();
            });
          break;
        default:
          break;
      }
    },
    toDetail(item) {
      this.$router.push({
        path: "/user/addBankcard",
        query: { idCard: item.idCard }
      });
    },
    addBank() {
      this.$router.push({ path: "/user/addBankcard" });
    }
  },
  computed: {
    ...mapState(["hasbank"])
  },
  data() {
    return {
      bankList: [
        {
          id: 1,
          idCard: 1111,
          name: "中国银行"
        },
        {
          id: 2,
          idCard: 22,
          name: "农业银行"
        },
        {
          id: 3,
          idCard: 33,
          name: "邮政银行"
        }
      ],
      title: "我的银行卡"
    };
  }
};
</script>
<style lang="less" scoped>
@import "~styles/variable.less";
* {
  touch-action: none;
}
</style>